import { FormItem, IFormItemProps, useFormLayout } from '@formily/antd';
import { useField, observer } from '@formily/react';
import { getMessage } from '@inbiz/react';
import { getPlatform } from '@inbiz/utils';
import './index.less';
function FormItemVerticalCore(props: IFormItemProps) {
  const field = useField();
  const layout = useFormLayout();
  field.decoratorProps.colon = false;
  if (!field.titleMessage) {
    field.titleMessage = field.title;
  }
  const msg = getMessage(field.titleMessage);
  field.setTitle(msg);
  const title = msg?.indexOf?.('global.') !== 0 ? msg : '';
  return (
    <FormItem
      {...props}
      className={`${props.className + ''} ${getPlatform()}`}
      layout="vertical"
      labelStyle={{ position: 'relative', ...props.labelStyle }}
      label={
        (field?.title || field?.decoratorProps?.labelExtra) && (
          <div className="formItemVertical-label">
            {title}
            {layout.colon !== false && field.title && ':'}
            {field.decoratorProps?.labelExtra && (
              <div className="ant-formily-item-label-extra">
                {field.decoratorProps?.labelExtra()}
              </div>
            )}
          </div>
        )
      }
    />
  );
}

export const FormItemVertical = observer(FormItemVerticalCore)
